<template>
    <div class="header">
        <van-icon @click="goBack" name="arrow-left" style="margin:0 .3rem 0 0;" />回到上一页
    </div>
    <!-- 头像用户上传 -->
    <van-uploader :after-read="afterRead" />

    <!-- 用户头像预览 -->
    <div class="previewImg">
        <img :src="imgSrc" alt="">
    </div>

    <van-button type="primary" @click="goPersonal">确认</van-button>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref, reactive } from 'vue'
import requestFn from '@/utils/https'

const router = useRouter()
// 回到上一页
const goBack = () => {
    router.push({
        path:'/personal'
    })
}

// 用户头像上传
const afterRead = (file) => {
    // 此时可以自行将文件上传至服务器
    // console.log(file);
    imgSrc.value = file.content

    // 调用图片上传接口
    requestFn({
        url: '/mysql_uploadImg',
        method: 'post',
        data: { n: file.content, name: file.file.name }
    }).then( res => {
        console.log(res)

        // 把上传成功之后返回的图片信息，保存到本地存储
        localStorage.setItem('imgsrc', res.data.name)
    })
};

// 回到用户中心页
const goPersonal = ()=>{
    router.push({
        path:'/personal'
    })
}

let imgSrc = ref('')

</script>


<style lang="less" scoped>
.header {
    margin: 0 .5rem;
    height: 1rem;
    padding: .2rem 0;
    text-align: left;
    font-size: .6rem;
}
.previewImg {
    background: #eee;
    min-height: 2rem;
    border-radius: .3rem;
    overflow: hidden;
    margin: 1rem;
}
</style>
